﻿@model AntUnion.FrameWork.Model.Models.TbSystemConfig
@using AntUnion.FrameWork.Model.Models;
@{
    ViewData["Title"] = "Create";
    Layout = "~/Areas/Console/Views/Shared/_Layout.cshtml";
}
@section head{
    <style>
        .testPicdiv {
            width: 200px;
            height: 100px;
            overflow: auto;
            border: none;
        }

        .layui-input-disabled {
            background-color: #f2f2f2;
        }

        .scrollbar::-webkit-scrollbar { /*滚动条整体样式*/
            width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        .scrollbar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #009688;
        }

        .scrollbar::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

        .layui-form-label {
            width: 250px !important;
        }

        .layui-input {
            width: 100%;
        }

        .layui-input-block {
            margin-left: 250px !important;
        }

        .layui-input-inline {
            width: 220px !important;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
    <script src="~/js/CommonHelper.js"></script>
    <script src="~/js/Kz.layedit/ace/ace.js"></script>
    <link href="~/css/index.css" rel="stylesheet" />
    <script type="text/javascript">
        var $;
        var ImageNum = 0;
        var SliderImage = new Array();
        //var hide_Image1 = "";
        //var hide_Image2 = "";
        //var hide_Image3 = "";
        //var hide_Image4 = "";

        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'upload', 'laydate', 'layedit'], function () {
            $ = layui.$
                , form = layui.form
                , admin = layui.admin
                , table = layui.table
                , upload = layui.upload
                , element = layui.element
                , laydate = layui.laydate
                , layedit = layui.layedit
                ; //获取窗口索引;

            layedit.set({
                //暴露layupload参数设置接口 --详细查看layupload参数说明
                uploadImage: {
                    url: '../../Console/Base/UploadFile?type=1',
                    accept: 'image',
                    acceptMime: 'image/*',
                    exts: 'jpg|png|gif|bmp|jpeg',
                    size: 1024 * 10
                    , done: function (data) {
                        console.log(data);
                    }
                }
                , rightBtn: {
                    type: "layBtn",//default|layBtn|custom  浏览器默认/layedit右键面板/自定义菜单 default和layBtn无需配置customEvent
                    customEvent: function (targetName, event) {
                        //根据tagName分类型设置
                        switch (targetName) {
                            case "img":
                                alert("this is img");
                                break;
                            default:
                                alert("hello world");
                                break;
                        };
                        //或者直接统一设定
                        //alert("all in one");
                    }
                }
                //测试参数
                , backDelImg: true
                //开发者模式 --默认为false
                , devmode: true
                //是否自动同步到textarea
                , autoSync: true
                //内容改变监听事件
                //插入代码设置 --hide:false 等同于不配置codeConfig
                , codeConfig: {
                    hide: true,  //是否隐藏编码语言选择框
                    default: 'javascript', //hide为true时的默认语言格式
                    encode: true //是否转义
                    , class: 'layui-code' //默认样式
                }
                , devmode: true
                , videoAttr: ' preload="none" '
                , tool: ['html', 'undo', 'redo', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'removeformat', 'fontFomatt', 'fontfamily', 'fontSize', 'fontBackColor', 'colorpicker', 'face'
                    , '|', 'left', 'center', 'right', '|', 'images', 'image_alt', 'video', '|', 'table', 'customlink', 'preview']
            });
            var index = layedit.build('Description', {
                height: 200
            }); //建立编辑器;
            element.init();

            lay('.datetime').each(function () {
                laydate.render({
                    elem: this
                    , trigger: 'click'
                    , type: 'time'
                    , format: 'HH:mm'
                });
            });


            /* 监听提交 */
            form.on('submit(submit-form)', function (data) {
                var datas = data.field;
                var i = 0;
                var _list = {};
                for (var item in datas) {

                    if (item != "file") {
                        _list["item[" + i + "].id"] = item;
                        _list["item[" + i + "].type"] = $("#" + item).attr("type");
                        _list["item[" + i + "].value"] = datas[item];
                        i++;
                    }
                }
                console.log(_list)
                $.ajax({
                    type: "POST",
                    url: "/Console/SystemConfig/SetPage",
                    data: _list,//{ data: "abc" }, // 你的formid
                    async: true,
                    error: function (request) {
                        alert("Connection error");
                    },
                    beforeSend: function (xhr) {
                        layui.layer.load();
                    },
                    success: function (data) {
                        var item = eval(data);
                        if (item.code == 0) {
                            layer.msg("编辑成功", { icon: 1, time: 1000 }, function () {
                                //window.location.reload();
                            });
                        } else if (item.code == 1) {
                            layer.msg(item.data, { icon: 2 });
                        } else {
                            layer.msg("保存失败", { icon: 0 });
                        }
                        layer.closeAll('loading');
                    }
                });
                return false;
            });

            form.on('submit(ReturnPage)', function (data) {
                window.location.href = "/Console/SystemConfigTab/Index"
            });

            $('.config_img').each(function () {
                var id = $(this).data('id')
                upload.render({
                    elem: "#btn_Image" + id
                    , url: "/Console/Winner/UploadFile?width=300&height=300"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                    , multiple: true
                    , number: 1
                    , before: function (obj) {
                        layer.load();
                    }
                    , done: function (res, index) {
                        if (res.code === 0) {
                            var html = '<div style="width:100px;height:100px;display:inline-block;">';
                            html += '<div class="cover-picdiv scrollbar picdiv" style="width:100px;height:100px;">';
                            html += '<img src="' + res.data.src + '"style="width:100px;height:100px;" />';
                            html += '</div>';
                            html += '<div class="cover-picdiv shade" style="width:100px;height:100px;">';
                            html += '<div class="testPicdiv-btn">';
                            html += '<i class="layui-icon layui-icon-search" onclick="Preview(\'' + res.data.src + '\')"></i>';
                            html += '<i class="layui-icon layui-icon-close-fill" onclick="EditDelImg(' + id + ')"></i>';
                            html += '</div>';
                            html += '</div>';
                            html += '</div>';
                            $("#btn_Image" + id).hide();
                            $("#div_Image" + id).append(html);
                            $("#hide_Image" + id).val(res.data.src);
                        }
                        layer.closeAll('loading');
                    }
                    , error: function (Error) {
                        layer.closeAll('loading');
                    }
                });
            })

            $("#selectLog").click(function () {
                var url = '/Console/SystemConfig/RatePage';
                var index = layer.open({
                    type: 2,
                    title: '查询日志',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['600px', '450px'],
                    content: url,
                    success: function (layero) {

                    }
                });
            });

            $("#selectfee").click(function () {
                var url = '/Console/SystemConfig/FeePage';
                var index = layer.open({
                    type: 2,
                    title: '查询日志',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['600px', '450px'],
                    content: url,
                    success: function (layero) {

                    }
                });
            });
        });

        //预览图片
        function Preview(src) {
            var theImage = new Image();
            theImage.src = src;
            var imageWidth = theImage.width + 50;
            var imageHeight = theImage.height + 100;
            if (imageHeight > 500 || imageWidth > 1000) {
                imageWidth = theImage.width / 2 + 50
                imageHeight = theImage.height / 2 + 100
            }
            var imgHtml = "<div style=\"text-align:center;padding-top: 25px;\"><img style='max-width:100%;' src='" + src + "' /></div>";

            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [imageWidth + 'px', imageHeight + 'px'],
                shadeClose: true,//点击外围关闭弹窗
                scrollbar: false,//不现实滚动条
                title: "图片预览", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
            return false;
        }

        //移除图片
        function EditDelImg(id) {
            $("#div_Image" + id).empty();
            $("#btn_Image" + id).show();
            $("#hide_Image" + id).val('');
        }

    </script>
}
<div class="layui-fluid">
    <div class="layui-card">

        @*<div class="layui-card-header">
            配置项
            @if (Convert.ToString(ViewBag.pid) != "9")
            {
                <button type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="ReturnPage">返回上级</button>
            }
        </div>*@

        <div class="layui-card-body" style="padding: 15px; ">
            <form class="layui-form layui-form-pane" action="" lay-filter="component-form-group">

                @foreach (var i in ViewBag.data as List<TbSystemConfig>)
                {
                    switch (i.Type.ToLower())
                    {
                        case "text":
                            <div class="layui-form-item">
                                <label class="layui-form-label">@i.Info</label>
                                @if (string.IsNullOrEmpty(i.Parameter))
                                {
                                    <div class="layui-input-block">
                                        <input type="text" id="@i.Id" name="@i.Id" value="@i.Value" maxlength="100" lay-verify="Value" placeholder="" autocomplete="off" class="layui-input">
                                    </div>
                                }
                                else
                                {
                                    <div class="layui-input-block">
                                        <input type="text" id="@i.Id" name="@i.Id" value="@i.Value" maxlength="100" lay-verify="Value" placeholder="" autocomplete="off" class="layui-input">
                                        <label style="color:red;">@i.Parameter</label>
                                    </div>
                                }
                            </div>
                            break;
                        case "datetime":
                            <div class="layui-form-item">
                                <label class="layui-form-label">@i.Info</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="@i.Id" name="@i.Id" value="@i.Value" maxlength="100" lay-verify="Value" placeholder="" autocomplete="off" class="layui-input @i.Type">
                                </div>
                                @if (!string.IsNullOrEmpty(i.Parameter))
                                {
                                    <div class="layui-form-mid layui-word-aux" style="color:red !important;">@i.Parameter</div>
                                }
                            </div>
                            break;
                        case "number":
                            <div class="layui-form-item">
                                <label class="layui-form-label">@i.Info</label>
                                <div class="layui-input-inline">
                                    @*<input type="number" id="@i.Id" name="@i.Id" value="@i.Value" maxlength="100" lay-verify="Value" placeholder="" autocomplete="off" class="layui-input"  @(i.Min!=null?"min="+i.Min+"":"")  @(i.Max!=null?"max="+i.Max+"":"")  @(i.Step!=null?"step="+i.Step+"":"")>*@
                                    <input type="number" id="@i.Id" name="@i.Id" value="@i.Value" maxlength="100" placeholder="" autocomplete="off" class="layui-input" lay-verify="@i.MenuName">
                                </div>
                                @if (!string.IsNullOrEmpty(i.Parameter))
                                {
                                    <div class="layui-form-mid layui-word-aux" style="color:red !important;">@i.Parameter</div>
                                }
                            </div>
                            break;
                        case "radio":
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">@i.Info</label>
                                    <div class="layui-input-block">
                                        @foreach (var item in i.Parameter.Split('|'))
                                        {
                                            <input type="radio" id="@i.Id" name="@i.Id" value="@item.Split('=')[0]" title="@item.Split('=')[1]" @Html.Raw(item.Split('=')[0] == i.Value ? " checked=\"checked\"" : "")>
                                        }
                                    </div>
                                </div>
                            </div>
                            break;
                        case "rich":
                            <div class="layui-form-item">
                                <label class="layui-form-label">@i.Info</label>
                                <div class="layui-input-block">
                                    <textarea id="Description" name="@i.Id">@i.Value</textarea>
                                </div>
                            </div>
                            break;
                        case "image":
                            <div class="layui-form-item">
                                <label class="layui-form-label">@i.Info</label>
                                <div class="layui-input-inline" style="margin-left:10px;width:240px;">
                                    <div name="div_Image@(i.Id)" id="div_Image@(i.Id)" lay-verify="div_Image" lay-verType="tips" class="config_img" data-id="@i.Id">
                                        <div style="width:100px;height:100px;display:inline-block;">
                                            <div class="cover-picdiv scrollbar picdiv" style="width:100px;height:100px;">
                                                <img src="@i.Value" style="width:100px;height:100px;">
                                            </div>
                                            <div class="cover-picdiv shade" style="width:100px;height:100px;">
                                                <div class="testPicdiv-btn">
                                                    <i class="layui-icon layui-icon-search" onclick="Preview('@i.Value')"></i>
                                                    <i class="layui-icon layui-icon-close-fill" onclick="EditDelImg('@i.Id')"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="upload">
                                        <button type="button" class="layui-btn layui-btn-normal" id="btn_Image@(i.Id)" style="display:none;">上传</button>
                                        <div class="layui-form-mid layui-word-aux">@i.Parameter</div>
                                        <input id="hide_Image@(i.Id)" name="@i.Id" type="hidden" value="@i.Value" class="hide_Image" />
                                    </div>
                                </div>
                            </div>
                            break;
                    }
                }
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button class="layui-btn" lay-submit="" lay-filter="submit-form">立即提交</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
